<template>
    <div style="padding: 20px 0;">

        <el-form :model="form" inline label-width="70" style="color: white">
            <el-form-item label="科目">
                <el-select
                    v-model="form.subject_id"
                    clearable
                    style="width: 240px;margin-right: 20px;"
                >
                    <el-option
                        v-for="item in subjects"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="考核时间">
                <el-date-picker
                    v-model="form.test_date"
                    format="YYYY-MM-DD HH:mm:ss"
                    placeholder="选择日期时间"
                    style="width: 240px"
                    type="datetime"
                    value-format="YYYY-MM-DD HH:mm:ss"
                />
            </el-form-item>
            <el-form-item label="应考人数">
                <el-input v-model="form.yk_number" style="width: 100px"/>
            </el-form-item>
            <el-form-item label="实考人数">
                <el-input v-model="form.yk_percent" style="width: 100px"/>
            </el-form-item>
            <!--            <el-form-item label="成绩">-->
            <!--                <el-input v-model="form.score" style="width: 100px"/>-->
            <!--            </el-form-item>-->
            <!--            <el-form-item label="评定">-->
            <!--                <el-input v-model="form.grade" style="width: 100px"/>-->
            <!--            </el-form-item>-->
            <el-form-item>
                <el-upload
                    :before-upload="beforeUpload"
                    :on-success="handleSuccess"
                    :show-file-list="false"
                    accept=".xlsx, .xls"
                    action="/api/import-score"
                    class="upload-demo"
                >
                    <el-button type="primary">导入成绩</el-button>

                </el-upload>

            </el-form-item>
        </el-form>
        <div class="tool" style="margin: 20px 0;display: flex;">
            <el-input v-model="className" placeholder="班级" style="width: 240px;margin-right: 20px;"/>
            <el-input v-model="group_name" placeholder="组别" style="width: 240px;margin-right: 20px;"/>
            <el-button style="margin-right: 20px;" type="primary" @click="handleSearch">搜索</el-button>


        </div>
        <el-table
            ref="multipleTableRef"
            :data="students"
            row-key="id"
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55"/>
            <el-table-column label="学号" prop="no" width="180"/>
            <el-table-column label="姓名" prop="name" width="180"/>
            <el-table-column label="组别" prop="group_name"/>
            <el-table-column label="班级" prop="class_name"/>
            <el-table-column label="成绩">

                <template #default="scope">
                    <el-input v-model="scope.row.score" style="width: 100px"/>
                </template>
            </el-table-column>
            <el-table-column label="评定">

                <template #default="scope">
                    <el-input v-model="scope.row.grade" style="width: 100px"/>
                </template>
            </el-table-column>

        </el-table>
        <div class="pagination-block" style="margin-top: 20px; display: flex; justify-content: flex-end;">
            <el-pagination :current-page="currentPage" :default-page-size="5" :total="total"
                           background
                           layout="prev, pager, next"
                           size="small"
                           @current-change="handleCurrentChange"
            />
        </div>
        <el-button style="margin-top: 10px;" type="primary" @click="getSelectedRows">批量录入</el-button>
    </div>
</template>

<script setup>
import {reactive, ref} from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";

const subjects = ref([])
const currentPage = ref(1);
const total = ref(0);
const className = ref('')
const group_name = ref('')
const selectedRows = ref([]);

const form = reactive({
    subject_id: '',
    test_date: '',
    yk_number: '',
    yk_percent: '',
})
const students = ref([])
const handleSearch = () => {
    getStudents()


}
const getStudents = () => {

    axios.get('/api/students', {
        params: {
            page: currentPage.value,
            className: className.value
            , group_name: group_name.value
        }
    }).then((response) => {
        students.value = response.data.data.data;

        total.value = response.data.data.total;
    });
}
const getSubjects = () => {
    axios.get('/api/score-subjects').then((response) => {
        subjects.value = response.data.data
        subjects.value = subjects.value.map((item) => {
            return {
                value: item.id,
                label: item.name,
            }
        })
    })
}
getSubjects()
const handleCurrentChange = (number) => {
    currentPage.value = number
    getStudents();
}
const handleSelectionChange = (rows) => {
    selectedRows.value = rows;
    console.log(selectedRows.value)
};
getStudents()
const getSelectedRows = () => {
    const selectedIds = selectedRows.value.map((row) => {
        return [
            row.id,
            row.score,
            row.grade,
        ]
    });
    if (selectedIds.length === 0) {
        ElMessage({
            message: '请选择要录入的行.',
            type: 'warning',
        })
        return;
    }
    axios.post('/api/batch-score', {
        student_ids: selectedIds,
        form: form
    }).then((response) => {
        ElMessage({
            message: '批量录入成功.',
            type: 'success',
        })
    })
};
const beforeUpload = (file) => {
    const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
    if (!isExcel) {
        ElMessage({
            message: '请上传Excel文件.',
            type: 'success',
        })
        return false;
    }

}
const handleSuccess = (response, file, fileList) => {
    ElMessage.success('导入成功');
};
</script>

<style lang="scss" scoped>

</style>
